<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!--[if lt IE 9]>
    <script type="text/javascript" src="__PUBLIC__/Admin/lib/html5.js"></script>
    <script type="text/javascript" src="__PUBLIC__/Admin/lib/respond.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/Admin/lib/PIE_IE678.js"></script>
    <![endif]-->
    <link href="__PUBLIC__/Admin/css/H-ui.min.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/Admin/css/H-ui.admin.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/Admin/lib/icheck/icheck.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/Admin/css/style.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/Admin/lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
    <link href="__PUBLIC__/Admin/lib/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
    <!--[if IE 6]>
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>新增图片</title>
</head>
<body>
<div class="pd-20">
    <form action="__URL__/savemedia" method="post" enctype="multipart/form-data" class="form form-horizontal" id="form-media-add">
        <div class="row cl">
            <label class="form-label col-2"><span class="c-red">*</span>影音标题：</label>
            <div class="formControls col-10">
                <input type="text" class="input-text" value="{$data['title']}" name="title">
                <input type="hidden" value="0" name="mtype" id="type">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-2"><span class="c-red">*</span>选择影音：</label>
            <div class="formControls col-10">
                 <div class="file_select">
                      <!--上传按钮-->
                      <div class="file_upload_btn">
                           <p>点我上传影音</p>
                           <input type="file" name="fileToUpload" onchange="uploadFile(this)">
                      </div>
                     <!--end-->
                     <!--上传处理中-->
                     <div class="uploading_box">
                          <div class="uploading">
                              <div class="loader-inner ball-clip-rotate">
                                 <div></div>
                              </div>
                          </div>
                          <div class="upload_tips">
                               <span>10</span>%
                               <p>正在上传中……</p>
                          </div>
                          <div class="file_upload_process">
                               <div></div>
                          </div>
                     </div>
                     <!--end-->
                     <!--上传成功·-->
                     <div class="upload_success">
                          <div class="upload_state_icon music_upload">
                               <p>我知道你不爱我</p>
                               <div class="upload_state_ok">
                               </div>
                          </div>
                     </div>
                     <!--end-->
                     <!--上传失败-->
                     <div class="upload_faill">
                         <div class="upload_state_icon music_upload" >
                             <p>我知道你不爱我</p>
                             <div class="upload_state_fall">
                             </div>
                         </div>
                     </div>
                     <!--end-->
                 </div>
            </div>
        </div>
        <div class="row_more">
            <div class="more_title">影音详情</div>
            <div class="row cl">
                <label class="form-label col-2"><span class="c-red">*</span>影音名称：</label>
                <div class="formControls col-10">
                    <input type="text" class="input-text" id="name" value="{$data['title']}" name="name">
                </div>
            </div>
            <div class="row cl" id="Lrc">
                <label class="form-label col-2">歌词上传：</label>
                <div class="formControls col-10">
                      <div class="lrcShow">
                           <i></i>
                           <span></span>
                      </div>
                      <div class="lrc_select">
                          <input type="file" name="lrc" onchange="selectLrc(this)">
                      </div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-2"><span class="c-red">*</span>影音排序：</label>
                <div class="formControls col-10">
                    <input type="text" class="input-text" name="sort" value="{$data['sort']|default=0}" name="title">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-2"><span class="c-red">*</span>影音关键词：</label>
                <div class="formControls col-10">
                    <input type="text" class="input-text" name="keyword" value="{$data['keyword']}" name="title">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-2"><span class="c-red">*</span>影音类别：</label>
                <input type="hidden" name="type" id="selTypebox">
                <div class="formControls col-10" id="selType">
                     <div class="sel" data-name="伤感" onclick="selType(this,0)">
                         伤感
                         <b class="selected"></b>
                     </div>
                    <div class="sel" data-name="悲情" onclick="selType(this,1)">
                        悲情
                        <b></b>
                    </div>
                    <div class="sel" data-name="情歌" onclick="selType(this,2)">
                        情歌
                        <b></b>
                    </div>
                    <div class="sel" data-name="快乐" onclick="selType(this,3)">
                        快乐
                        <b></b>
                    </div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-2">影音简介：</label>
                <div class="formControls col-10">
                    <textarea name="media_intro" cols="" rows="" class="textarea" placeholder="说点什么...最少输入10个字符" datatype="*10-100" dragonfly="true" nullmsg="备注不能为空！" onKeyUp="textarealength(this,200)">{$data['intro']}</textarea>
                    <p class="textarea-numberbar"><em class="textarea-length">0</em>/200</p>
                </div>
            </div>
        </div>
        <div class="row cl">
            <div class="col-10 col-offset-2">
                <button onClick="article_save_submit();" class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i> 保存并提交审核</button>
                <button onClick="article_save();" class="btn btn-secondary radius" type="button"><i class="Hui-iconfont">&#xe632;</i> 保存草稿</button>
                <button onClick="layer_close();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
            </div>
        </div>
    </form>
</div>
</div>
<iframe frameborder="0" id="iframe" style=" height: 100px;" name="upload_frame"></iframe>
<script type="text/javascript" src="__PUBLIC__/Admin/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/Admin/js/H-ui.js"></script>
<script type="text/javascript" src="__PUBLIC__/Admin/js/H-ui.Admin.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/baseCommon.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/MinAjax.js"></script>
<script src="__PUBLIC__/js/startmove.js"></script>
<script>
     var filename = ''; // 文件名
     var fileType = ''; // 文件后缀
     function uploadFile(file){
          var fileV = file.value;
          fileType = subfix(fileV);
          filename = fileV.substring(fileV.lastIndexOf('\\')+1,fileV.lastIndexOf('.'));
          var file_select = document.getElementsByClassName('file_upload_btn')[0]
          var uploading_box = document.getElementsByClassName('uploading_box')[0];
          var mediaType = /mp3|MP3|MP4|mp4|avi|AVI|ogg|OGG/; //允许上传的类型
          if(!mediaType.test(fileType)){
               alert('您上传不是媒体文件');
               return;
          }
          var url = "{:U('Admin/media/file_upload')}";
          // 通过formData 来获取上传进度
          var fd = new FormData();
          fd.append("fileToUpload",file.files[0]);
          var xhr = new XMLHttpRequest();
          xhr.upload.addEventListener("progress", uploadProgress, false);
          xhr.addEventListener("load", uploadComplete, false);
//          xhr.addEventListener("error", uploadFailed, false);
//          xhr.addEventListener("abort", uploadCanceled, false);
          xhr.open("POST", url);//修改成自己的接口
          xhr.send(fd);
//          document.getElementsByClassName('form')[0].submit();
          file_select.style.display = 'none';
          uploading_box.style.display = 'block';
     }

     /**
      * 上传进度跟踪
      * */
     function uploadProgress(evt) {
         if (evt.lengthComputable) {
             var percentComplete = Math.round(evt.loaded * 100 / evt.total);
             console.log(percentComplete.toString())
             UploadProcess(percentComplete.toString())
         }
         else {
             document.getElementById('progressNumber').innerHTML = 'unable to compute';
         }
     }

     /**
      * 上传完成
      * */
     function uploadComplete(evt) {
         /* 服务器端返回响应时候触发event事件*/
         var response = eval('('+evt.target.responseText+')');
         var videoReg = /MP4|mp4/;
         var file_upload_btn = document.getElementsByClassName('file_upload_btn')[0];
         var uploading_box = document.getElementsByClassName('uploading_box')[0];
         var upload_success = document.getElementsByClassName('upload_success')[0];
         var upload_success_name = upload_success.getElementsByTagName('p')[0];
         var upload_more = document.getElementsByClassName('row_more')[0];
         var upload_error = document.getElementsByClassName('upload_faill')[0];
         var upload_error_name = upload_error.getElementsByTagName('p')[0];
         uploading_box.style.display = 'none';
         upload_success.style.display = 'block';
         upload_more.style.display = 'block';
         upload_more.style.opacity = 1;
         upload_success_name.innerHTML = filename;
         document.getElementById('name').value = filename;
         // 移除上传按钮 创建隐藏域
         var UploadBtn = file_upload_btn.getElementsByTagName('input')[0];
         file_upload_btn.removeChild(UploadBtn);
         var oInpFilePath = document.createElement("input");
         oInpFilePath.type = "hidden";
         oInpFilePath.name = 'Filename';
         oInpFilePath.value = response['savename'];
         file_upload_btn.appendChild(oInpFilePath);
         if(videoReg.test(fileType)){
               document.getElementById('Lrc').style.display = 'none';
               document.getElementById('type').value = '1';
               var upload_state_icon = document.getElementsByClassName('upload_state_icon')[0];
               upload_state_icon.className = 'upload_state_icon video';
               upload_success.style.background = "url("+response['screen']+")";
               upload_success.style.backgroundSize = "100% 100%";
               var oInpFileScreen = document.createElement("input");
               oInpFileScreen.type = "hidden";
               oInpFileScreen.name = 'mediaScreen'
               oInpFileScreen.value = response['screen'];
               file_upload_btn.appendChild(oInpFileScreen);
         }
     }

     /**
      * 更新进度
      * 页面渲染
      */
     function UploadProcess(i){
            var file_select = document.getElementsByClassName('file_upload_btn')[0]
            var upload_tipsSpan = document.getElementsByClassName('upload_tips')[0].getElementsByTagName('span')[0];
            var file_upload_process = document.getElementsByClassName('file_upload_process')['0'].getElementsByTagName('div')[0];
            file_upload_process.style.height = 100-i+"%";
            upload_tipsSpan.innerHTML = i;
     }

     // 选择歌词文件
     function selectLrc(file){
         var Filev = file.value;
         var Filename = Filev.substring(Filev.lastIndexOf('\\')+1,Filev.lastIndexOf('.'));
         var FileType = Filev.substring(Filev.lastIndexOf('.')+1);
         var LrcReg = /lrc|LRC/;
         if(!LrcReg.test(FileType)){
              alert("文件不是歌词文件");
              return;
         }
         var lrcShow = document.getElementsByClassName('lrcShow')[0];
         var lrcShowSpan = lrcShow.getElementsByTagName('span')[0];
         lrcShow.style.display = 'inline-block';
         lrcShowSpan.innerHTML = Filename;
     }

     /**
      *选择类别[单选]
      */
     function selType(obj,index){
        var dataName = obj.getAttribute('data-name');
        var selTypebox = document.getElementById('selTypebox');
        var selected = document.getElementById('selType').getElementsByTagName('b');
        for(i=0;i<selected.length;i++){
             selected[i].className = '';
        }
        selTypebox.value = dataName;
        selected[index].className = 'selected'
     }
</script>
</body>
</html>